<template>
  <div style="height: 100%; background-color: #fff">
    <van-nav-bar title="论坛发布" @click-left="onClickLeft">
      <template #left>
        <van-tag type="primary" color="#fa7070" size="large">取消</van-tag>
      </template>
      <template #right>
        <van-tag type="primary" size="large" @click="handleReleaseForum"
          >发布</van-tag
        >
      </template>
    </van-nav-bar>
    <van-field
      v-model="title"
      label="标题"
      maxlength="50"
      show-word-limit
      placeholder="请输入标题"
    />
    <van-field
      v-model="details_content"
      rows="15"
      autosize
      label="内容"
      type="textarea"
      placeholder="请输入内容"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import moment from "moment";
import { Toast, Dialog } from "vant";
import { releaseForum } from "@/api/forum";
export default {
  name: "",
  setup() {
    // 点击左箭头返回前一页
    const onClickLeft = () => history.back();

    // 标题
    const title = ref("");
    // 内容
    const details_content = ref("");
    // 使用vuex
    const store = useStore();
    // 点击发布
    const handleReleaseForum = () => {
      const { user_id, user_name, user_avatar } = store.state.user.profile;
      if (title.value.trim().length === 0) {
        return Toast("标题不能为空");
      }
      if (details_content.value.trim().length === 0) {
        return Toast("内容不能为空");
      }
      // 参数
      const params = {
        user_id,
        user_name,
        user_avatar,
        title: title.value.trim(),
        details_content: details_content.value,
        createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
      };
      // 弹出框二次确认
      Dialog.confirm({
        title: "确认框",
        message: "您确认要发布论坛吗？",
      })
        .then(() => {
          // 发送请求发布论坛
          releaseForum(params)
            .then((res) => {
              if (res.status === 200) {
                history.back();
                Toast("发布成功");
              }
            })
            .catch((error) => {
              throw new Error(error);
            });
        })
        .catch(() => {
          Toast("已取消");
        });
    };

    return {
      onClickLeft,
      title,
      details_content,
      handleReleaseForum,
    };
  },
};
</script>
<style scoped lang="less"></style>
